<template>
  <!-- 您好 这个页面 已经调通了  -->
  <div v-if="filmData!=null">

    <van-sticky>
    <van-nav-bar title="影院"  v-if="showTop" >
          <template #left>
            <van-icon name="arrow-down" />
          </template>
        </van-nav-bar>
    </van-sticky>
   


    <div v-if='mainData'>
      <div class="top">
        <div class="topicon" @click="$router.go(-1)">
          <van-icon name="arrow-left" />
        </div>
        <img class="topimg" :src="filmData.poster" />
      </div>
      <div class="info">
        <div class="film">
          <div class="name">{{ filmData.name }}</div>
          <div class="type">{{ filmData.filmType.name }}</div>
          <div class="grade">{{ filmData.grade }}分</div>
        </div>

        <van-row>
          <van-col class="detail" span="24">{{ filmData.category }}</van-col>
        </van-row>

        <van-row>
          <van-col class="detail" span="24">{{ playTime }}上映</van-col>
        </van-row>

        <van-row>
          <van-col class="detail" span="24">{{ filmData.nation }} | 分钟</van-col>
        </van-row>

        <van-row type="flex" justify="center">
          <van-col
            class="detail intro"
            :class="{active: isActive }"
            span="24"
          >{{ filmData.synopsis }}</van-col>
          <van-col span="1" v-if="isActive">
            <van-icon class="icon" name="arrow-up" @click="isActive = !isActive" />
          </van-col>
          <van-col span="1" v-else>
            <van-icon class="icon" name="arrow-down" @click="isActive = !isActive" />
          </van-col>
        </van-row>
      </div>
      <div class="empty"></div>
      <div class="actor">
        <div class="title">演职人员</div>
        <div class="vant">
          <van-swipe class="my-swipe" :loop="false" :width="90" :height="160">
            <van-swipe-item v-for="(item, index) in filmData.actors" :key="index">
              <img class="actimg" v-lazy="item.avatarAddress" />

              <div class="actname">{{ item.name }}</div>
              <div class="actrole">{{ item.role }}</div>
            </van-swipe-item>
            <template #indicator>
              <div />
            </template>
          </van-swipe>
        </div>
      </div>
      <div class="empty"></div>
      <div class="juzhao">
        <van-nav-bar>
          <template #left>
            <p>剧照</p>
          </template>

          <template #right>
            <div @click="mainData=false">全部({{ filmData.photos.length}})</div>
            <van-icon class="icon" name="arrow" />
          </template>
        </van-nav-bar>

        <div class="vant">
          <van-swipe class="my-swipe" :loop="false" :width="155" :height="110">
            <van-swipe-item v-for="(item, index) in filmData.photos" :key="index">
              <img class="ju-actimg" v-lazy="item" @click="showJu(filmData.photos,index)" />
            </van-swipe-item>
            <template #indicator>
              <div />
            </template>
          </van-swipe>
        </div>
      </div>
      <div class="empty"></div>
      <van-button color="#FF5F16" size="large" @click="pushRouter" v-if="showBuy!='false'">选座购票</van-button>
    </div>
    <div v-else>
       
      <van-nav-bar  :title="'剧照('+filmData.photos.length+')'"     >
        <template #left>
          <van-icon name="arrow-left"  @click="mainData=true"  />
        </template>
      </van-nav-bar>
       <span  v-for="(item, index) in filmData.photos" :key="index">
          <img class='ju-img' :src="item" />
       </span >

    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Vant from "vant";
import "vant/lib/index.css";
import request from "../../request-get/onefilm-request.js";
import { ImagePreview } from "vant";
// Vue.use(Vant);
export default {
  name: "filmIdView",
  data() {
    return {
      filmData: null,
      isActive: false,
      mainData:true,
      scroll:"",
      showTop:false,
      showBuy:undefined
    };
  },

  created() {
    this.showBuy=this.$route.query.showBuy
    request(this.$route.query.filmId).then(res => {
      this.filmData = res;
    });
  },
  computed: {
    filmId() {
      return this.$store.state.filmId;
    },

    playTime() {
      var date = new Date(this.filmData.premiereAt * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";

      var D = date.getDate();
      return Y + M + D;
    }
  },
  methods: {
    pushRouter() {
      this.$router.push({
        path: "CinemaDetails",
        query: {
          filmId: this.$route.query.filmId,
          cityId: this.$store.state.cityId,
          k: 123
        }
      });
    },
    showJu(photos, index) {
      ImagePreview({
        images: photos,
        startPosition: index,
        closeable: true,
        loop: false
      });
    },
    menu() {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        // console.log(this.scroll);
        if(this.scroll>=150){
          this.showTop=true;
        
        }else if(this.scroll<150){
          this.showTop=false;
     
        }
      }
  },
  mounted(){
    window.addEventListener('scroll', this.menu);
  }

};
</script>

<style   scoped>
.top {
  width: 100%;
  height: 210px;
  overflow: hidden;
  position: relative;
}
.topicon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 5px;
  background-color: rgb(255, 255, 255, 0.5);
  text-align: center;
  line-height: 30px;
  z-index: 10;
}
.van-icon {
  font-size: 24px;
  color: rgb(0, 0, 0, 0.5);
  line-height: 30px;
}
.topimg {
  width: 100%;
  position: absolute;
  top: -168px;
}

.info {
  margin: 12px 18px;
}
.film {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.name {
  font-size: 18px;
}
.type {
  height: 100%;
  background-color: #d3d3d3;
  color: #fff;
  font-size: 14px;
  margin: 0 10px;
  padding: 0 2px;
  border-radius: 2px;
}
.grade {
  font-size: 20px;
  font-family: kaiti;
  color: orange;
  text-align: right;
  flex-grow: 1;
}

.detail {
  font-size: 13px;
  color: #707070;
  margin-top: 8px;
}

.intro {
  width: 100%;
  height: 36px;
  margin: 10px 0px 0px 0px;
  overflow: hidden;
  transition: all 0.3s;
}
.active {
  height:100%;
}

.icon {
  font-size: 13px;
}

.empty {
  background-color: #f4f4f4;
  width: 100%;
  height: 10px;
}

.title {
  margin: 12px 18px;
  font-size: 16px;
}
.van-swipe {
  margin-left: 20px;
}
.van-swipe-item {
  color: black;
  font-size: 13px;
  background-color: #fff;
}
.actcont {
  width: 85px;

  margin-left: 20px;
  text-align: center;

  position: relative;
}

.actimg {
  width: 85px;
  height: 110px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.van-nav-bar__left p {
  padding: 0 6px;
  font-size: 16px;
}
/* 剧照的样式 */
.ju-actimg {
  width: 150px;
  height: 100px;
}
/* 单独剧照页面的样式 */
.ju-img{
  width:122px;
  height:122px;
  margin:1px 1px 0 0;

}

.actname {
  width: 85px;
  height: 20px;
  text-align: center;
  position: absolute;
  top: 50px;
}

.actrole {
  width: 85px;
  height: 20px;
  text-align: center;
  position: absolute;
  top: 70px;
}

/* .van-button {
  margin-bottom: 60px;
} */
</style>
